<template>
  <div class="resource">
    <el-table
      :data="ResourceList"
      border
      table-layout="auto"
      cell-class-name="align-c"
    >
      <el-table-column label="编号" prop="id" />
      <el-table-column label="资源名称" prop="name" />
      <el-table-column label="资源路径" prop="url" />
      <el-table-column label="描述" prop="description" />
      <el-table-column label="添加时间" prop="createTime">
        <template #default="{ row }">
          {{ formateDate(row.createTime) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
  <ElConfigProvider :locale="zhCn">
    <div class="page">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="ResourceUserList"
        @current-change="ResourceUserList"
      />
    </div>
  </ElConfigProvider>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { getResourceListAPI } from "./api/resource";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider } from "element-plus";
import { formateDate } from "@/utils";

const queryParams = reactive<IResourceListParams>({
  nameKeyword: "",
  pageNum: 1,
  pageSize: 10,
  urlKeyword: "",
  categoryId: 0,
});

const ResourceList = ref<IResourceModel[]>([]);

const total = ref(0);

const ResourceUserList = () => {
  getResourceListAPI(queryParams).then((res) => {
    console.log(res.data);
    if (res.code === 200) {
      ResourceList.value = res.data.list;
      total.value = res.data.total;
    }
  });
};
const reset = () => {
  if (queryParams.nameKeyword?.trim()) {
    queryParams.nameKeyword = "";
    ResourceUserList();
  }
};
ResourceUserList();
</script>
<style lang="less" scoped>
:deep(.align-c) {
  .cell {
    text-align: center !important;
  }
}
.page {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}
.resource {
  margin: 20px 0;
}
</style>
